//地图公共样式，用于客户地图和名单地图

@function pxToVw($px) {
    @return $px/1080*100vw;
}

ion-header .toolbar-background-ios {
    background: linear-gradient(to right, #63b24c, #018c6e);
}
ion-header{
    background: linear-gradient(to right, #63b24c, #018c6e);
}
ion-header .toolbar{
    height: 15vw;
    min-height: 40px;
}
ion-header .toolbar-ios ion-title {
    padding: 0 40px;
    input {
        width: 100%;
        font-size: pxToVw(45);
        font-weight: 100;
        background: none;
        border: none;
        color: #fff;
        &::placeholder {
            color: #fff;
            opacity: .5;
        }
    }
}
.text-input-ios {
    margin: 0;
}
.input-warp {
    display: flex;
    flex: 1;
    padding: 6px 0;
    align-items: center;
    border-bottom: 1px solid #fff;
    span {
        margin-left: 3vw;
        font-weight: 100;
        font-size: 8vw;
        color: #fff;
        margin-top: -3vw;
        margin-bottom: -2vw;
    }
}
.select-range {
    width: 100%;
    height: auto !important;
    top:-0.5vw;
    padding: 0;
    .select-range-list {
        padding: 0 40px;
        display: flex;
        align-items: flex-start;
        span {
            display: inline-block;
            border: 1px solid #fff;
            color: #fff;
            border-radius: 14px;
            margin: 0 1vw;
            width: pxToVw(180);
            height: pxToVw(70);
            text-align: center;
            line-height: pxToVw(70);
            font-size: pxToVw(42);
            &.selected {
                background: #fff;
                color: #39b54a;
            }
            &:first-child {
                margin-left: 0;
            }
            &:last-child {
                margin-right: 0;
            }
            &.range-text {
                border: none;
                width: 10vw;
            }
        }
    }
}

.map-content {
    position: relative;
}

.location-info{
    margin-top: pxToVw(45);
    margin-left: pxToVw(60);
    margin-right: pxToVw(60);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    background: #eaa008;
    opacity: .8;
    width: 88vw;
    p{
        font-size: pxToVw(42);
        color: #fff;
        text-align: center;
        padding: pxToVw(15) 2vw;
        margin: 0;
    }
}

.map-customer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    .map-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1002;
    }
    .current-customer {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1003;
        background: #fff;
        .current-customer-content {
            position: relative;
            width: 100vw;
            .customer-number{
                height: pxToVw(140);
                line-height: pxToVw(140);
                padding: 0 2vw;
                border-bottom: 1px solid #e9e9e9;
                display: flex;
                justify-content: space-between;
                .leftArrow,.rightArrow{
                    font-size: pxToVw(45);
                    color: #35ac63;
                    i{
                        width: pxToVw(32);
                        height: pxToVw(32);
                        display: inline-block;
                        background-size: cover;
                        margin: 0 1vw;
                    }
                    &.disabled{
                        color: #d4d4d4;
                    }
                }
                .leftArrow{
                    i{
                        &.use{
                            background-image: url("../assets/images/map/icon_leftArrow.png");
                        }
                        &.notUse{
                            background-image: url("../assets/images/map/icon_Arrow_disabled.png");
                        }
                    }
                }
                .rightArrow{
                    i{
                        &.use{
                            background-image: url("../assets/images/map/icon_RightArrow.png");
                        }
                        &.notUse{
                            background-image: url("../assets/images/map/icon_Arrow_disabled-1.png");
                        }
                    }
                }
                .amount{
                    font-size: pxToVw(54);
                    color: #000;
                }
            }
            .customer-name {
                padding: 1.5vw 0 1vw 6vw;
                //border-bottom: 1px solid #e9e9e9;
                display: flex;
                align-items: center;
                .avatar {
                    width: 9vw;
                    height: 9vw;
                }
                .name {
                    font-size: pxToVw(54);
                    margin: 0 2.8vw;
                    color: #35ac63;
                }
                .vip {
                    //display: flex;
                    align-items: center;
                    span{
                        margin-left: 6px;
                        font-size: 3.33vw;
                        color: #999;
                    }
                    i {
                        display: block;
                        background-size: cover;
                        width: pxToVw(256);
                        height: pxToVw(49);
                        &.gold {
                            background-image: url('../assets/images/map/icon_vip_gold.png');
                        }
                        &.platinum {
                            background-image: url('../assets/images/map/icon_vip_platinum.png');
                        }
                        &.diamond {
                            background-image: url('../assets/images/map/icon_vip_diamond.png');
                        }
                        &.supreme {
                            background-image: url('../assets/images/map/icon_vip_supreme.png');
                        }
                    }
                }
            }
            .customer-info {
                padding: 0 0 4vw 18vw;
                .info-text {
                    padding: .8vw 0;
                    color: #666;
                    font-size: 3.8vw;
                }
                p {
                    margin: 0;
                }
                span {
                    display: inline-block;
                    margin-right: 2vw;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
            .customer-tag {
                //border-bottom: 1px solid #e9e9e9;
                padding-left: 18vw;
                padding-bottom: 0;
                span {
                    color: #1f212a;
                    font-size: 4.2vw;
                    background: #f1f1f2;
                    font-weight: 500;
                    padding: 1.2vw 4vw;
                    border-radius: 8vw;
                }
            }

            .customer-btn {
                display: flex;
                justify-content: center;
                padding-top: 0;
                span {
                    height: pxToVw(120);
                    line-height: pxToVw(120);
                    color: #fff;
                    width: 50%;
                    font-size: 4.2vw;
                    font-weight: 500;
                    text-align: center;
                }
                .call {
                    background: #39b54a;
                    &.disabled {
                        background: #bcbec1;
                    }
                }
                .nav {
                    background: #018c6e;
                }
                i {
                    width: 7.4vw;
                    height: 7.4vw;
                    display: inline-block;
                    vertical-align: middle;
                    background-size: cover;
                    &.call-phone {
                        background-image: url("../assets/images/map/icon_contacts.png");
                    }
                    &.call-nav {
                        background-image: url("../assets/images/map/icon_directions.png");
                    }
                }
            }

            .customer-line {
                display: none;
                position: absolute;
                right: 6vw;
                top: -10vw;
                width: 20vw;
                height: 20vw;
                line-height: 20vw;
                border-radius: 50%;
                background: #67c6b4;
                text-align: center;
                span {
                    color: #fff;
                    font-weight: 500;
                    font-size: 5vw;
                }
            }
        }
    }
}
.select-ios {
    display: none;
}
.BMap_stdMpType4 .BMap_stdMpZoom {
    top: 40vw;
}
.scroll-content{
    overflow: hidden;
}
